import React, { ReactElement, ReactNode } from 'react'
import { Tabs } from 'antd'
import CardList from './relation/CardList';

const { TabPane } = Tabs;

function callback(key: string) {
    console.log(key);
}

interface Props {

}

const list = [
    {
        tab: "最佳搭档",
        type: "partners"
    },
    {
        tab: "被谁克制",
        type: "restrained"
    },
    {
        tab: "克制谁",
        type: "restraint"
    }
]

export default function Index({ }: Props): ReactElement {
    return (
        <div>
            <Tabs defaultActiveKey="1" onChange={callback}>
                {
                    list.map((item: any, index: number) => {
                        return <TabPane tab={ item.tab } key={ index + 1}>
                            <CardList type = { item.type }/>
                        </TabPane>
                    })
                }
            </Tabs>
        </div>
    )
}
